<template>
    <view class="main">
        <view class="top-user dispaly-just-between">
            <view class="user dispaly-center">
                <view class="avatar"
                    @click.stop="navTo(`/subPackage/community/userDetail?id=${comDetailData?.user_id}&is_care=${is_care}`)">
                    <image mode="aspectFill" :src="comDetailData?.avatar" />
                </view>
                <view class="info">
                    <view class="name dispaly-center">
                        <view class="name">{{ comDetailData?.nickname }}</view>
                        <view class="gz dispaly-align-center" v-if="is_care == 1">已关注</view>
                    </view>
                    <view class="time">{{ comDetailData?.create_time }}</view>
                </view>
            </view>
            <view class="option dispaly-center">
                <view class="gw dispaly-align-center" v-if="is_care == 0"
                    @click="care(comDetailData?.user_id as number)">关注</view>
                <view class="gz dispaly-align-center" v-else @click="cancenCare(comDetailData?.user_id as number)">已关注
                </view>
                <view class="share" @click="showPopup = true">
                    <image src="/static/icon/share1.png" />
                </view>
            </view>
        </view>
        <view class="swiper" v-if="comDetailData?.image.length">
            <tn-swiper v-model="currentSwiperIndex" :data="comDetailData?.image" width="100%" height="907">
                <template #default="{ data }">
                    <view class="swiper-data">
                        <image @click="preview(comDetailData?.image, currentSwiperIndex)" class="image" :src="data"
                            mode="aspectFill" />
                    </view>
                </template>
            </tn-swiper>
        </view>
        <view class="content">
            <view class="title">{{ comDetailData?.title }}</view>
            <view class="desc">
                {{ comDetailData?.content }}
            </view>
            <view class="option">
                <view class="item-box dispaly-center">
                    <view class="items dispaly-center">
                        <view class="icon">
                            <image src="/static/icon/comn.png" />
                        </view>
                        <view class="num">{{ comDetailData?.com_num }}</view>
                    </view>
                    <view class="items dispaly-center">
                        <view class="icon">
                            <image src="/static/icon/good.png" />
                        </view>
                        <view class="num">{{ comDetailData?.praise }}</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="comment-list">
            <view class="pj">评论</view>
            <Empty v-if="!comDetailData?.comment_list.length" text="暂无评论" />
            <scroll-view scroll-y="true" class="scroll-Y" v-else>
                <view class="item" v-for="item in comDetailData?.comment_list" :key="item.id">
                    <view class="user dispaly-center">
                        <view class="avatar"
                            @click.stop="navTo(`/subPackage/community/userDetail?id=${item.user_id}&is_care=${item.is_care}`)">
                            <image mode="aspectFill" :src="item.avatar" />
                        </view>
                        <view class="info">
                            <view class="name dispaly-center">
                                <view class="name">{{ item.nickname }}</view>
                            </view>
                            <view class="time">{{ item.create_time.split(' ')[0] }}</view>
                        </view>
                    </view>
                    <view class="con">
                        {{ item.content }}
                    </view>
                    <view class="c-img dispaly-center " v-if="item.image.length">
                        <view class="img" v-for="(img, imgIndex) in item.image" :key="img">
                            <image mode="aspectFill" :src="img" @click.stop="preview(item.image, imgIndex)" />
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
    <view class="comment">
        <TextareaComment @send="send" ref="textareaCommentRef" v-model:showInputPop="showInputPop"
            @closeInputPop="closeInputPop">
        </TextareaComment>
    </view>
    <Share :show-popup="showPopup" @close-pop="show => showPopup = show" />
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import TnSwiper from '@tuniao/tnui-vue3-uniapp/components/swiper/src/swiper.vue'
import { reactive, ref } from 'vue'
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { getCommunityDetail, replyComment } from '@/api/home/home'
import type { CommunityDetailType } from '@/types/responseData'
import TextareaComment from '@/components/comment/TextareaComment.vue'
import type {
    RequestSubmitCommentType,
} from "@/types/requstParm";
import Share from "@/components/share/share.vue";

import type { RequestAddCareType } from '@/types/requstParm'
import { postAddCare, postCancelCare } from '@/utils/util'

// 添加关注
const formData = reactive<RequestAddCareType>({
    user_id: 2,
    relation_id: '',
    type: 1
})

const care = async (id: number) => {
    formData.relation_id = id
    const res = await postAddCare(formData)
    if (res == 'ok') {
        is_care.value = 1
    }
}

// 取消关注
const cancenCare = async (id: number) => {
    const res = await postCancelCare(id, 1)
    if (res == 'ok') {
        is_care.value = 0
    }
}

const comId = ref<number>()
let is_care = ref<number>()
onLoad((option) => {
    comId.value = option?.id
    is_care.value = option?.is_care
    console.log(is_care.value, 'is_care.value')
    getComDetailData()
})

// 获取职位详情
let comDetailData = ref<CommunityDetailType>()
const getComDetailData = async () => {
    const res = await getCommunityDetail({ id: comId.value as number, user_id: 2 })
    if (res.code == 0) {
        comDetailData.value = res.data
    }
}

const currentSwiperIndex = ref<number>(0)
// 图片预览
const preview = (images: string[], index: number) => {
    uni.previewImage({
        urls: images,
        current: index
    })
}

// 评论输入框组件
const textareaCommentRef = ref()
// 新建评论弹窗
const showInputPop = ref(true)
// 关闭输入框
const closeInputPop = () => {
    showInputPop.value = false
}

// 发送消息
interface MsgType {
    imgList?: string[],
    content: string
}

const send = async (data: MsgType) => {
    let msgData: RequestSubmitCommentType = {
        content: data.content,
        image: data.imgList?.join(','),
        user_id: comDetailData.value?.user_id as number,
        bbs_id: comDetailData.value?.id as number,
        to_user_id: '',
        pid: ''
    }
    const res = await replyComment(msgData)
    if (res.code == 0) {
        getComDetailData()
        uni.showToast({
            title: '评论成功',
            icon: 'none'
        })
    }
    console.log(res, 'data')
}

const showPopup = ref<boolean>(false);

// 分享
onShareAppMessage(() => {
    return {
        title: comDetailData.value?.title,
        path: `/subPackage/community/communityDetail?id=${comDetailData.value?.id}`,
    };
});

</script>

<style>
page {
    background-color: #f4f4f6;
}
</style>

<style lang="scss" scoped>
.main {
    padding-bottom: 194rpx;

    // .scroll-Y {
    //     // height: 595rpx;
    // }
    .top-user {
        margin-bottom: 20rpx;
    }

    .user {
        margin-bottom: 23rpx;

        .avatar {
            margin-right: 10rpx;

            image {
                width: 65rpx;
                height: 65rpx;
                border-radius: 50%;
            }
        }

        .info {
            .name {
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 26rpx;
                color: #000000;

                .gz {
                    margin-left: 12rpx;
                    width: 70rpx;
                    height: 28rpx;
                    border-radius: 14rpx;
                    border: 1rpx solid #008298;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 18rpx;
                    color: #008298;
                }

            }

            .time {
                margin-top: 10rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #7E7E7E;
            }
        }
    }

    .top-user {
        padding: 30rpx;
        background-color: #fff;



        .option {
            .gz {
                width: 92rpx;
                height: 44rpx;
                background: #fff;
                border-radius: 22rpx;
                border: 1rpx solid #008298;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #008298;
                margin-right: 22rpx;
            }

            .gw {
                width: 92rpx;
                height: 44rpx;
                background: #008298;
                border-radius: 22rpx;
                border: 1rpx solid #008298;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #FFFFFF;
                margin-right: 22rpx;
            }

            .share {
                padding-top: 10rpx;

                image {
                    width: 36rpx;
                    height: 36rpx;
                }
            }
        }
    }

    .swiper {
        image {
            width: 100%;
            height: 907rpx;
        }
    }

    .content {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;

        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 26rpx;
            color: #000000;
        }

        .desc {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #000000;
            line-height: 40rpx;
            margin: 25rpx 0 50rpx 0;
        }

        .option {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 35rpx;

            .item-box {
                .items:last-child {
                    margin-left: 34rpx;
                }

                .items {
                    .icon {
                        margin-right: 10rpx;
                        padding-top: 10rpx;

                        image {
                            width: 32rpx;
                            height: 32rpx;
                        }
                    }

                    .num {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 500;
                        font-size: 26rpx;
                        color: #A2A2A2;
                    }
                }
            }
        }
    }

    .comment-list {
        padding: 30rpx;
        background-color: #fff;

        .pj {
            font-family: PingFang SC, PingFang SC;
            font-weight: 800;
            font-size: 28rpx;
            color: #000000;
            border-bottom: 1rpx solid #D2D2D2;
            margin-bottom: 40rpx;
            padding-bottom: 20rpx
        }

        .item:last-child {
            margin-bottom: 0;
        }

        .item {
            margin-bottom: 20rpx;
            border-bottom: 1rpx solid #e6e6e6;

            .con {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #000000;
                line-height: 79rpx;
            }

            .c-img {
                flex-wrap: wrap;

                .img {
                    margin: 0 35rpx 35rpx 0;

                    image {
                        width: 196rpx;
                        height: 196rpx;
                        border-radius: 10rpx;
                    }
                }
            }
        }
    }
}
</style>